<template>
  <v-container>
    <v-sheet color="thirdary" class="rounded-lg pa-10 pb-16">
      <div class="text-h4 text-center pt-5 pb-16">填写资料</div>
      <div class="d-flex justify-center py-5 cur-point p-relative">
        <label for="file" class="cur-point">
          <v-avatar
            color="primary"
            size="200"
            class="d-flex flex-column thirdary--text"
          >
            <v-img for="file" :src="base" v-if="!!base" @click="base = null">
              <template v-slot:placeholder>
                <v-row class="fill-height ma-0" align="center" justify="center">
                  <v-progress-circular
                    indeterminate
                    color="grey lighten-5"
                  ></v-progress-circular>
                </v-row>
              </template>
            </v-img>
            <div v-else>
              <i class="iconfont"
                ><span style="font-size: 5rem">&#xe66f;</span></i
              >
              <div class="text-h6 mt-2">上传您的头像</div>
              <v-file-input
                class="o-hidden p-absolute"
                id="file"
                hide-input
                color="thirdary"
                autofocus
                accept="image/*"
                v-model="img"
              >
              </v-file-input>
            </div>
          </v-avatar>
        </label>
      </div>
      <div class="d-flex flex-wrap">
        <div class="col-12 col-md-6 pa-0 pr-md-5">
          <v-text-field
            label="姓名"
            v-model="name"
            autocomplete="off"
          ></v-text-field>
        </div>
        <div class="col-12 col-md-6 pa-0 pl-md-5">
          <v-text-field
            label="职称"
            v-model="level"
            autocomplete="off"
          ></v-text-field>
        </div>
      </div>
      <div class="d-flex flex-wrap py-5 p-relative">
        <div class="col-12 col-md-6 pa-0 pr-md-5 d-flex">
          <div class="flex-wrap d-flex flex-wrap">
            <div class="col-6 col-md-3 pr-2 pa-0">
              <v-select
                label="省份/直辖市"
                autocomplete="off"
                v-model="selectedProvinceName"
                :items="provinceNames"
              ></v-select>
            </div>
            <div class="col-6 col-md-3 pl-2 pr-md-2 pa-0">
              <v-select
                label="城市/区县"
                autocomplete="off"
                :items="cityNames"
                v-model="selectedCityName"
              ></v-select>
            </div>
            <div class="col-12 col-md-6 pl-md-2 pa-0">
              <v-select
                label="医院"
                autocomplete="off"
                :items="hospitalNames"
                v-model="selectedhospitalName"
              ></v-select>
            </div>
          </div>
        </div>
        <div class="col-12 col-md-6 pa-0 pl-md-5 d-flex">
          <v-select
            label="科室"
            :items="deparmentNames"
            v-model="departmentName"
            autocomplete="off"
          ></v-select>
        </div>
      </div>
      <div class="d-flex flex-wrap">
        <div class="col-12 col-md-2 pa-0 pr-md-5 d-flex">
          <v-select
            label="科室分类"
            :items="deparmentNames"
            v-model="selectedDepartmentName"
            autocomplete="off"
          ></v-select>
        </div>

        <div class="col-12 col-md-10 pa-0">
          <v-select
            :items="illnessNames"
            label="擅长症状"
            v-model="selectedIllnessNames"
            :multiple="!!selectedDepartmentName"
          ></v-select>
        </div>
      </div>
      <div>
        <v-textarea label="个人简介" v-model="intro"></v-textarea>
      </div>
      <div>
        <v-textarea label="擅长领域" v-model="speciality"></v-textarea>
      </div>
      <v-btn color="primary" width="100%" class="mt-10" @click="submit"
        >提交</v-btn
      >
    </v-sheet>
  </v-container>
</template>



<script>
import { sendFormData } from "../components/network";
import getBase64 from "../untill/getBase64.js";
import { mapActions, mapState } from "vuex";
import { hospitalInfos } from "../components/network/getHospitalInfos";
export default {
  data() {
    return {
      img: null,
      base: "",
      avatar: "",
      name: "",
      level: "",
      intro: "",
      speciality: "",
      hospitalName: "",
      departmentName: "",
      selectedIllnessNames: [],

      selectedDepartmentName: "",

      provinces: [],
      selectedProvinceName: "",

      cityNames: ["请选择省份"],
      selectedCityName: "",

      hospitalNames: [],
      selectedhospitalName: "",
    };
  },

  watch: {
    img() {
      this.img &&
        getBase64(this.img).then((data) => {
          this.base = data;
        });
    },

    async selectedProvinceName(newval) {
      if (newval) {
        const { data } = await this.$axios.get(
          `proxy/getCities?province=${this.provincesMap.get(newval)}`
        );
        const cityNames = data?.map(
          (item) => item?.cityName ?? item?.countyName
        );
        this.cityNames = cityNames;
      }
    },

    async selectedCityName(newval) {
      this.hospitalNames = await hospitalInfos.getHospitalNames({
        provinceName: this.selectedProvinceName,
        cityName: newval,
      });
    },
  },

  computed: {
    ...mapState(["departments"]),
    deparmentNames() {
      if (this.departments && this.departments.length) {
        return this.departments.map((item) => item.name);
      }
    },
    selectedDepartment() {
      const that = this;

      if (that.departments.length) {
        let findItem;
        that.departments.forEach((item) => {
          if (item.name === that.selectedDepartmentName) {
            findItem = item;
            return;
          }
        });
        return findItem;
      } else {
        return null;
      }
    },
    illnessNames() {
      if (this.selectedDepartment || this.selectedIllnessNames.length) {
        return this.selectedIllnessNames.concat(
          this.selectedDepartment.illnesses.map((item) => item.name)
        );
      } else {
        return ["请选择科室"];
      }
    },

    provinceNames() {
      if (this.provinces?.length) {
        return this.provinces
          ?.map((item) => item?.provinceName)
          .concat(this.selectedProvinceName);
      }
    },

    provincesMap() {
      const map = new Map();
      for (const i of this.provinces) {
        map.set(`${i.provinceName}`, i.province);
      }
      return map;
    },
  },
  methods: {
    ...mapActions(["getDepartments"]),
    async submit() {
      const formData = new FormData();
      formData.append("avatar", this.img);
      formData.append("userId", this.$route.params.id);
      const filePath = await sendFormData("upload/uploadAvatar", formData);
      const form = {
        avatar: filePath,
        name: this.name,
        level: this.level,
        intro: this.intro,
        speciality: this.speciality,
        departmentName: this.departmentName,
        provinceName: this.selectedProvinceName,
        cityName: this.selectedCityName,
        hospitalName: this.selectedhospitalName,
        illnesses: this.selectedIllnessNames,
      };

      const { data } = await this.$axios.post("doctors/updateDoctorInfo", form);
      this.loading = true;
      this.btnText = "提交中";
      if (data && data.code == 200) {
        this.loading = false;
        this.btnText = "提交完成，正在跳转";
        this.$router.push("/home");
        window.location.reload();
      }
    },
  },
  mounted() {
    const that = this;

    (async function () {
      await that.getDepartments();
    })();
    (async function () {
      const { data } = await that.$axios.get(
        `doctors/getAllDoctorInfo?doctorId=${that.$route.params.id}`
      );
      if (data) {
        that.base = data.avatar;
        that.name = data.name;
        that.level = data.level;
        that.intro = data.intro;
        that.speciality = data.speciality;
        that.selectedProvinceName = data.provinceName;
        that.selectedCityName = data.cityName;
        that.cityNames.concat(that.selectedCityName);
        that.selectedhospitalName = data.hospitalName;
        that.hospitalNames.concat(that.selectedhospitalName);

        data.department && (that.departmentName = data.department.name);
        if (data.illnessNames && data.illnessNames.length) {
          that.selectedIllnessNames = data.illnessNames.map(
            (item) => item.name
          );
        }
      }
    })();

    (async function () {
      const { data: provinces } = await that.$axios.get("proxy/getProvinces");
      if (provinces?.length) {
        that.provinces = provinces;
      }
      if (that.selectedProvinceName) {
        const { data } = await that.$axios.get(
          `proxy/getCities?province=${that.provincesMap.get(
            that.selectedProvinceName
          )}`
        );
        const cityNames = data?.map(
          (item) => item?.cityName ?? item?.countyName
        );
        that.cityNames = cityNames;
        if (!that.selectedhospitalName) {
          that.hospitalNames = await hospitalInfos.getHospitalNames({
            provinceName: that.selectedProvinceName,
            cityName: that.selectedCityName,
          });
        }
      }
    })();
  },
};
</script>



<style lang="scss" scoped>
</style>
